import './index.css'
import moment from 'moment'
import { Component } from 'react'
import Tabs from './components/Tabs'
import CommentList from './components/CommentList'
import Form from './components/Form'

class App extends Component {
  state = {
    // hot: 热度排序  time: 时间排序
    tabs: [
      {
        id: 1,
        name: '热度',
        type: 'hot',
      },
      {
        id: 2,
        name: '时间',
        type: 'time',
      },
    ],
    active: 'hot',
    list: [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ],
    content: '',
  }

  formatTime = (time) => {
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
  }

  changeTab = (type) => {
    this.setState({
      active: type,
    })
  }

  del = (id) => {
    this.setState({
      list: this.state.list.filter((item) => item.id !== id),
    })
  }

  handleChange = (e) => {
    this.setState({
      content: e.target.value,
    })
  }

  // 添加评论
  addComment = (text) => {
    const { list } = this.state

    // 处理 id
    const id = Math.max(...list.map((item) => item.id)) + 1

    // 创建新的状态
    const newList = [
      {
        id,
        author: '89 吴彦祖',
        comment: text,
        time: new Date(),
        attitude: 0,
      },
      ...list,
    ]

    this.setState({
      list: newList,
    })
  }

  // 点赞或踩
  changeAttitude = (id, attitude) => {
    const newList = this.state.list.map((item) => {
      if (item.id === id) {
        return {
          ...item,
          attitude,
        }
      }
      return item
    })
    this.setState({
      list: newList,
    })
  }

  // 删除评论
  delComment = (id) => {
    const newList = this.state.list.filter((item) => item.id !== id)
    this.setState({
      list: newList,
    })
  }

  componentDidMount() {
    const initData = [
      {
        id: 1,
        author: '刘德华',
        comment: '给我一杯忘情水',
        time: new Date('2021-10-10 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 1,
      },
      {
        id: 2,
        author: '周杰伦',
        comment: '哎哟，不错哦',
        time: new Date('2021-10-11 09:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: 0,
      },
      {
        id: 3,
        author: '五月天',
        comment: '不打扰，是我的温柔',
        time: new Date('2021-10-11 10:09:00'),
        // 1: 点赞 0：无态度 -1:踩
        attitude: -1,
      },
    ]
    // const list = JSON.parse(localStorage.getItem('list') || '[]')
    const list = JSON.parse(localStorage.getItem('list'))
    this.setState({ list: list || initData })
  }

  componentDidUpdate() {
    localStorage.setItem('list', JSON.stringify(this.state.list))
  }

  render() {
    console.log(222)
    return (
      <div className="App">
        <div className="comment-container">
          {/* 评论数 */}
          <div className="comment-head">
            <span>{this.state.list.length} 评论</span>
          </div>
          {/* 切换 tabs */}
          <Tabs
            tabs={this.state.tabs}
            changeTab={this.changeTab}
            active={this.state.active}
          />
          {/* 添加评论 */}
          <Form addComment={this.addComment} />
          {/* 评论列表 */}
          <CommentList
            list={this.state.list}
            delComment={this.delComment}
            changeAttitude={this.changeAttitude}
          />
        </div>
      </div>
    )
  }
}

export default App
